// // 第一个React项目
// function App() {
//   return (
//     <div className="App">
//       This is App new
//     </div>
//   )
// }

// // React组件定义及使用
// function MyButton() {
//   return (
//     <div>
//       <button>自定义组件按钮</button>
//       <div>这是一个div</div>
//     </div>
//   )
// }
// function App() {
//   return (
//     <div className="App">
//       <MyButton></MyButton>
//     </div>
//   )
// }



// // JSX使用JS表达式
// const count = 10
// function getName() {
//   return "Jack"
// }
// const obj = {
//   color: 'red'
// }
// function App() {
//   return (
//     <div className="App">
//       This is App.js
//       {/* 使用变量 */}
//       {'string'}
//       {count}
//       {/* 函数调用 */}
//       {getName()}
//       {/* 访问js对象 */}
//       {new Date().getDate()}
//       {obj.color}
//       <div style={obj}>this is div</div>
//       <div style={{ color: 'red' }}>this is another div</div>
//     </div>
//   );
// }



// // JSX使用列表渲染
// import React from "react";
// const list = [
//   { id: 600028, name: "中国石化", income: 32122.15 },
//   { id: 601857, name: "中国石油", income: 30110.12 },
//   { id: 601668, name: "中国建筑", income: 22655.29 }
// ]
// function App() {
//   return (
//     <div className="App">
//       <div>基础：</div>
//       {/* 使用list的map函数，它接收一个箭头函数，箭头函数需要返回一个页面元素（本例中为<li>，大家记住固定格式就是，注意<li>中使用的item一定要与箭头函数的参数一样。而且需要注意的是对于任何列表渲染的元素，一定要为它的key赋值，否则会报错 */}
//       <ul>
//         {list.map(item => <li key={item.id}>{item.name}营业收入：{item.income}亿元</li>)}
//         {/* 如下是写法2： */}
//         {list.map(item => {
//           return <li key={item.id}>{item.name}营业收入：{item.income}亿元</li>
//         })}
//         {/* 如下是写法3：，但是建议还是上面2种方式（下面的方式涉及八股文的坑 */}
//         {/* {list.map(function (item) {
//           return <li key={item.id}>{item.name}营业收入：{item.income}亿元</li>
//         })} */}
//       </ul>

//       {/* 多行怎么办 */}
//       <div>多行写法：</div>
//       <ul>
//         {list.map(item => {
//           return <React.Fragment key={item.id}>
//             <li>{item.name}</li>
//             <li>营业收入：{item.income}亿元</li>
//           </React.Fragment>
//         })}
//       </ul>

//     </div>
//   );
// }



// // 条件渲染
// const isRise = false // 表示市值是否上涨
// function getDiv(v) {
//   if (v === 0) {
//     return <div>0</div>
//   } else if (v > 0) {
//     return <div>正数</div>
//   } else {
//     return <div>负数</div>
//   }
// }
// function App() {
//   return (
//     <div className="App">
//       {/* 逻辑与，相当于if */}
//       {isRise && <div style={{ color: 'red' }}>市值上升</div>}
//       {/* 三元运算符，相当于if else */}
//       {isRise ? <div style={{ color: 'red' }}>市值上升</div> : <div style={{ color: 'green' }}>市值下降</div>}
//       {/* 上面都是简单条件，如果条件非常复杂，那么使用函数返回JSX的方式 */}
//       {getDiv(0)}
//     </div>
//   )
// }



// // 事件处理
// function clickHandler(e) {
//   console.log(e)
// }
// // 自定义参数
// function clickHandlerWithArgs(e, v) {
//   console.log(e, v)
// }
// function App() {
//   return (
//     <div className="App">
//       <button onClick={clickHandler}>点击触发事件</button>
//       <button onClick={(e) => clickHandlerWithArgs(e, 1)}>自定义参数事件</button>
//     </div>
//   )
// }



// // useState
// import { useState } from "react";
// function App() {
//   // let count = 1;
//   // const clickHandler = () => {
//   //   count++;
//   //   console.log(count); // 可以发现确实变成了2，但是页面没有变化
//   // }
//   const [count, setCount] = useState(0) // 意思是创建一个state变量，初始值为0，返回的count存储了当前的值，setCount是一个函数，用于修改count存储的值
//   const clickHandler = () => {
//     // count++ // 注意，这种方式也不行，要修改必须使用setCount
//     setCount(count + 1) // setCount的用法：将新值传入即可
//   }

//   return (
//     <div>
//       <button onClick={clickHandler}>{count}</button>
//     </div>
//   )
// }


// 父子组件通信
// 1. 父组件的数据传递给子组件——props
// import ChildComponent1 from "./views/ChildComponent1";
// function App() {
//   const message = 'Message from Parent!';
//   return (
//     <div>
//       <h1>Parent Component</h1>

//       <ChildComponent1 text={message} />
//     </div>

//   );
// }


// // 2. 子组件的数据传递给父组件——回调函数
// import { useState } from "react";
// import ChildComponent2 from "./views/ChildComponent2";
// function App() {
//   const [message, setMessage] = useState('');

//   const handleMessage = (text) => {
//     setMessage(text);
//   };

//   return (
//     <div>
//       <h1>Parent Component</h1>

//       <p>{message}</p>

//       <ChildComponent2 onSendMessage={handleMessage} />
//     </div>

//   );
// }



// // 兄弟组件间通信
// import { useState } from "react";
// import Sibling1 from "./views/Sibling1";
// import Sibling2 from './views/Sibling2'
// function App() {
//   const [message, setMessage] = useState('');

//   const handleMessage = (text) => {
//     setMessage(text);
//   };

//   return (
//     <div>
//       <h1>Parent Component</h1>

//       <Sibling1 onSendMessage={handleMessage} />
//       <Sibling2 text={message} />
//     </div>

//   );
// };


export default App;
